<template>
  <div class="show-login">
    <div class="login-left-box">
      <div class="login-left">
        <p class="login-title">{{showLogin?'登录小说精品屋':'注册小说精品屋小说账号'}}</p>
        <input v-model="loginName" type="text" class="login-input login-name" :placeholder="showLogin?'手机号码':'请输入您的手机号码'">
        <input v-model="password" type="password" class="login-input login-passwd" :placeholder="showLogin?'密码':'请输入密码：6-20位字母/数字'">
        <p class="login-auto" v-show="showLogin">
          <input id="loginauto" type="checkbox" class="login-auto-box" v-model="autoLogin">
          <label for="loginauto" class="login-auto-hint">下次自动登录</label>
        </p>
        <div class="login-verify" v-show="!showLogin">
          <input v-model="verCode" type="text" class="login-input login-v-code" placeholder="请输入验证码">
          <img @click="regreshVerify()" :src="verifyCodeUrl" alt="" class="login-v-show">
        </div>
        <p class="login-btn">
          <span class="login-btn-style" @click="loginOrRegister()">{{showLogin?'登录':'注册'}}</span>
        </p>
      </div>
    </div>
    <div class="login-right">
      <p class="loginr-hint">{{showLogin?'还没有注册账号？':'已有账号？'}}</p>
      <p class="loginr-btn">
        <router-link :to="showLogin?'/index/register':'/index/login'">
          <span class="loginr-btn-style">{{showLogin?'立即注册':'立即登录'}}</span>
        </router-link>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      autoLogin:false,
      showLogin:true,
      verifyCodeUrl:this.global.apipre+'/file/getVerify?'+Math.random(),
      loginName:'',
      password:'',
      orginUrl:this.$route.query.orginUrl,
      verCode:''
    }
  },
  created() {
    if(this.$route.path.indexOf('register') >= 0){
      this.showLogin = false;
    }
  },
  methods:{
    regreshVerify(){
      this.verifyCodeUrl = this.global.apipre+'/file/getVerify?'+Math.random();
    },
    loginOrRegister(){
      // this.$cookies.set("Authorization", Math.random(), 0);
      // this.$cookies.set("username", '13564856985', 0);
      // this.$router.push('/index/home');
      if(!this.loginName){
        this.$message("请输入正确格式的登录名");
        return;
      }
      if(!this.password){
        this.$message("请输入正确格式的密码");
        return;
      }
      
      if(this.showLogin){
        //登录流程
        this.$http.postForm('/user/login',{username:this.loginName, password:this.password}, res=>{
          if(this.autoLogin){
            localStorage.setItem("Authorization", res.token);
          }else{
            localStorage.removeItem("Authorization");
          }
          this.$cookies.set("nickname", res.nickName, 0);
          this.$cookies.set("Authorization", res.token, 0);
          if(this.orginUrl){
            location.href = this.orginUrl;
          }else{
            this.$router.push('/index/home');
          }
        });
      }else{
        //注册流程
        this.$http.postForm('/user/register',{username:this.loginName, password:this.password, velCode:this.verCode}, res=>{
          this.$cookies.set("nickname", this.loginName, 0);
          this.$cookies.set("Authorization", res.token, 0);
          this.$router.push('/index/home');
        });
      }
    }
  },
  watch:{
    '$route.path': function(newVal, oldVal){
      if(newVal.indexOf('login') >= 0){
        this.showLogin = true;
      }else{
        this.showLogin = false;
      }
    }
  }
}
</script>

<style lang='scss' scopeds>
.show-login {
  margin: 20px auto;
  width: 80%;
  background-color: #fff;
  border-radius: 5px;
  padding: 100px 0;
  .login-left-box{
    display: inline-block;
    width: 60%;
    .login-left {
      text-align: center;
      margin: 0 auto;
      //312+36+2
      width: 350px;
      .login-title {
        color: #333;
        font-size: 23px;
        margin: 0 0 30px 0;
      }
      .login-input {
        font-size: 14px;
        height: 38px;
        border: 1px solid #ddd;
        outline: none;
        width: 312px;
        padding-left: 36px;
        background: url('../../assets/images/icon_user.png') no-repeat;
        margin-bottom: 20px;
      }
      .login-name {
        background-position: 13px 13px;
      }
      .login-passwd {
        background-position: 13px -51px;
      }
      .login-auto {
        margin: 0 0 15px 0;
        text-align: left;
        .login-auto-box {
          position: relative;
          top: 2px;
        }
        .login-auto-hint {
          font-size: 12px;
          color: #999;
        }
      }
      .login-verify {
        .login-v-code{
          width: 200px;
          background-position: 13px -117px;
          float: left;
        }
        .login-v-show {
          height: 38px;
          float: right;
          border: 1px solid #eee;
        }
      }
      .login-btn {
        .login-btn-style{
          display: inline-block;
          width: 100%;
          background-color: $base-color;
          color: #fff;
          border-radius: 20px;
          font-size: 16px;
          line-height: 40px;
          cursor: pointer;
        }
        .login-btn-style:hover {
          background-color: #FF7700;
        }
      }
    }
  }
  .login-right {
    display: inline-block;
    vertical-align: top;
    //border - 1
    width: calc(40% - 1px);
    border: 1px dotted #e3e3e3;
    border-width: 0 0 0 1px;
    padding: auto 0;
    text-align: center;
    .loginr-hint {
      font-size: 16px;
      color: #333;
      margin: 25px 0;
    }
    .loginr-btn {
      margin: 25px 0;
      .loginr-btn-style{
        display: inline-block;
        width: 130px;
        line-height: 40px;
        border: 1px solid $base-color;
        border-radius: 20px;
        color: $base-color;
      }
      .loginr-btn-style:hover{
        background-color: #fefaf6;
      }
    }
  }
}
</style>